<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			body {
				padding: 0;
				margin: 0;
			}
			.div0 {
				background-color: red;
				/* text-align: center; */
				width: 200px;
				height: 200px;
				/* padding: 50px;
				box-sizing: border-box; */
				position: absolute;
				left: 50%;
				top: 50%;
				/* 必须知道width和height */
				/* margin-left: -100px;
				margin-top: -100px; */
				transform: translate(-50%, -50%);
			}
			.div1 {
				/* display: inline-block; */
				width: 100px;
				height: 100px;
				/* margin: auto; */
				background-color: #000000;
				position: absolute;
				left: 50px;
				top: 50px;
			}
		</style>
	</head>
	<body>
		<!-- 
			居中
				水平居中
					text-align:center;写在父元素上，对块级元素无效
					margin:auto; width必须指定，写在子元素上
						也可以写具体数值
					padding，计算数值，记得box-sizing="border-box"
					transform需要配合定位
				垂直居中
					line-height：指的文字的高度，默认文字就是居中
					margin和padding: 具体数值，内联元素无效
					transform需要配合定位
		 -->
		 <div class="div0">
		 	<div class="div1">
		 		是
		 	</div>
			<!-- <span>哈哈</span> -->
		 </div>
	</body>
</html>
